<template>
	<view class="cons_con">
		<view class="" style="width: 100%;height: 160rpx;">
			<u-navbar title="苏体商业" :bgColor="navBgColor" :titleStyle="{ color: navColor }" fixed>
				<view slot="left"></view>
			</u-navbar>
		</view>
		<view class="conscon1">
			<u-sticky>
				<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
					:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="currentTab"
					@click=" tabClick"></u-tabs>
			</u-sticky>
		</view>

		<view class="add_list">
			<image class="add_li_img" :src="po48" mode="" v-if="list3 !=''" @click="onPreview"></image>
			<view class="group_9" v-else>
				<u-empty text="此楼层无数据"
					icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />
			</view>
			<view class="add_li_center">
				<view class="add_li_right" v-for="(item,index) in list3" :key="index" v-if="floor_show == 0"
					:class="{ resize: item.name === gjindex }" @click="loucheng(item,index)">
					<view class="add_li_left">
						{{item.name}}F
					</view>
				</view>
			</view>
		</view>

		<view class="conscon2">
			<u-sticky>
				<u-tabs :list="list2" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
					:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="current_Tab"
					@click=" tab_Click"></u-tabs>
			</u-sticky>
		</view>


		<view class="grouplist">
			<view class="" v-if="splist != ''" style="padding-bottom: 230rpx;">
				<!-- @click="gosport(item,index)" -->
				<view class="group_6" v-for="(item,index) in splist" :key="index">
					<view class="block_3">
						<!-- <image :src="item.img" mode=""></image> -->
						<u--image :src="item.img" width="280rpx" height="180rpx" radius="5"></u--image>
					</view>
					<view class="block_4">
						<view class="flex-between">
							<text lines="1" class="text_11">{{item.name}}</text>
							<!-- <view style="display: flex;align-items: center;justify-content: center; ">
								<view style="color: #999999;font-size: 24rpx;">详情</view>
								<image style="width: 24rpx;height: 24rpx;" :src="jiantou11" mode=""></image>
							</view> -->
						</view>
						<view class="text-wrapper_4">
							<text lines="1" class="text_12">{{item.open}}</text>
							<text lines="1" class="text_13">{{item.open_time}}</text>
						</view>
						<view class="image-text_1">
							<image
								src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/227be38665aa428ab14d5e0890edca87_mergeImage.png"
								class="label_4"></image>
							<text lines="1" class="text-group_1">{{item.pos}}</text>
						</view>
						<view class="group_7">
							<view class="" style="flex-direction: row;display: flex;">
								<view class="text-wrapper_5" v-for="(im,inx) in item.marks.slice(0, 3)" :key="inx">
									<text lines="1" class="text_14">{{im}}</text>
								</view>
							</view>
							<!-- <view class="text-wrapper_6">
								<text lines="1" class="text_15">淋浴间</text>
							</view> -->
							<!-- <view class="text-wrapper_7">
								<text lines="1" class="text_16">查看</text>
							</view> -->
						</view>
					</view>
				</view>

			</view>
			<view class="group_9" v-if="splist == ''">
				<u-empty mode="void"
					icon="https://oss.szsportscenter.cn/upload/2d/c9c9d19f7d661666e527715884c630.png?attname=huanxin.png" />
			</view>
		</view>
		<!-- <view class="box_1" v-else>
			<view class="box_4">
				<view class="image-text_1">
					<view class="section_1"></view>
					<text lines="1" class="text-group_1">厕位剩余数量</text>
				</view>
			</view>
			<view class="list_1">
				<view class="list-items_1-0" v-for="(item,index) in communallist" :key='index'>
					<text lines="1" class="text_4-1">{{item.name}}</text>
					<view class="list-items_1-1">
						<view class="list-items_1-6">
							<image style="width: 40rpx;height: 40rpx;" :src="po68" mode=""></image>
							<text lines="1" class="text_3-0">男：</text><text style="color: #38AC78;">{{item.data.man || 0}}</text>
						</view>
						<text lines="1" class="text_3-1"></text>
						<view class="list-items_1-6">
							<image style="width: 40rpx;height: 40rpx;" :src="po67" mode=""></image>
							<text lines="1" class="text_4-0">女：</text><text style="color: #E16F6F;">{{item.data.nv || 0}}</text>
						</view>
						<text lines="1" class="text_3-2"></text>
						<view class="list-items_1-6">
							<image style="width: 40rpx;height: 40rpx;" :src="po64" mode=""></image>
							<text lines="1" class="text_4-0">残卫：</text><text style="color: #CE8038;">{{item.data.other || 0}}</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view v-if="panel"
			style="width: 100%; height: 100vh;background-color:#000; opacity: 0.4; position: absolute;top:0;left:0;z-index: 999;">
		</view>
		<tabber :active="1"></tabber>
	</view>
</template>

<script>
	const subscribe = require('@/api/subscribe/index.js');
	export default {
		data() {
			return {
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#000000',
				po48: '',
				po50: this.$https.assetsPath + 'po50.png',
				list1: [],
				list2: [],
				currentTab: 0,
				current_Tab: 0,
				gjindex: 0,
				list3: [],
				cate_id: '',
				floorindex: '',
				splist: [],
				venue_id: '',
				time_list: '',
				jiantou11: this.$https.assetsPath + "jiantou11.png",
				floor_show: '',
				Preimg: [],
				communallist: [],
				po66: this.$https.assetsPath + 'po66.png',
				po50: this.$https.assetsPath + 'po50.png',
				po68: this.$https.assetsPath + 'maleq.png',
				po67: this.$https.assetsPath + 'femaleq.png',
				po64: this.$https.assetsPath + 'disabilityq.png',
				panel: false,
				addsav:0
			};
		},
		onLoad(options) {
			if (options.current_Tab) {
				console.log(options,'options1')
				this.current_Tab = options.current_Tab
				this.addsav = options.addsav
				this.getSeCondVenue()
			} else{
				console.log(options,'options2')
				this.addsav = 0
				this.getSeCondVenue()
			}
			// uni.onUserCaptureScreen(function() {
			//    uni.showToast({
			//    	icon: 'none',
			//    	mask: true,
			//    	title: '截屏'
			//    })
			//    this.panel = true
			// });
		},
		onShow() {},
		methods: {
			// 获取店铺商品
			async communal() {
				let data = {
					project_id: '',
					venue_id: '',
					type: '',
					output: 'json'
				}
				let result = await subscribe.communal(data)
				if (result.code == 1) {
					this.communallist = result.data
				}
			},
			// 获取分类商品
			async getSeCondVenue() {
				// this.po48 = ''
				// this.list2 = []
				// this.splist = []
				// this.gjindex = 0
				// this.current_Tab = 0
				let data = {}
				let result = await subscribe.getSeCondVenue(data)
				if (result.code == 1) {
					this.list1 = result.data
					this.list3 = result.data[0].floor
					this.gjindex = result.data[0].floor[0].name
					// this.po48 = result.data[0].floor[0].court_img
					this.venue_id = result.data[0].id
					this.floorindex = result.data[0].floor[0].name
					// this.floorindex = ''
					this.getSpCourtCate()
				}
			},
			// 获取商铺分类
			async getSpCourtCate() {
				let that = this
				let data = {
					venue_id: that.venue_id,
				}
				let result = await subscribe.getSpCourtCate(data)
				if (result.code == 1) {
					that.list2 = result.data
					if (that.addsav == 0) {
						that.cate_id = result.data[0].id
					} else{
						that.cate_id = result.data[2].id
					}
					that.getSpCourt1()
				}
			},
			// 获取店铺商品
			async getSpCourt1() {
				let data = {
					venue_id: this.venue_id,
					floor: this.floorindex,
					cate_id: this.cate_id,
				}
				let result = await subscribe.getSpCourt(data)
				if (result.code == 1) {
					this.splist = result.data.res
					if (result.data.floor_img != '') {
						this.po48 = result.data.floor_img
						this.Preimg = [result.data.floor_img]
					}
					this.floor_show = result.data.floor_show
					this.list3 = result.data.floor_list
					this.communal()
				}
			},
			// 获取店铺商品
			async getSpCourt2() {
				let data = {
					venue_id: this.venue_id,
					floor: this.floorindex,
					cate_id: this.cate_id,
				}
				let result = await subscribe.getSpCourt(data)
				if (result.code == 1) {
					this.splist = result.data.res
					if (result.data.floor_img != '') {
						this.po48 = result.data.floor_img
						this.Preimg = [result.data.floor_img]
					}
					this.floor_show = result.data.floor_show
					this.communal()
					// this.splist = result.data.res
				}
			},
			// 获取楼层
			async getSpCourt3() {
				let data = {
					venue_id: this.venue_id,
					cate_id: this.cate_id,
				}
				let result = await subscribe.getSpCourt(data)
				if (result.code == 1) {
					this.list3 = result.data.floor_list
				}
			},
			gosport(item, index) {
				if (item.venue_tag == 4) {
					uni.navigateTo({
						url: '/page_commodity/food_mapdetail?foodid=' + item.id
					})
					// uni.navigateTo({
					// 	url: './food_mapdetail?foodid=' + item.id
					// })
				} else {
					uni.navigateTo({
						url: '../../page_commodity/sports_detail?foodid=' + item.id
					})
				}
			},
			onsport(item, index) {
				var _this = this
				var now = new Date()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				this.time_list = h + ':' + min
				let open_time_end = item.open_time_end
				let open_time_start = item.open_time_start
				let tip = item.tip
				if (this.time_list > open_time_start && this.time_list < open_time_end) {
					if (uni.getStorageSync("openid") == '' || uni.getStorageSync("openid") == null) {
						uni.showToast({
							title: '请登录！',
							icon: 'none',
							duration: 850
						});
						// setTimeout(() => {
						// 	uni.reLaunch({
						// 		url: '/pages/personal/personal'
						// 	})
						// }, 1000)
					} else {
						uni.navigateTo({
							url: '/page_venues/pages/venuesDetail/stadium/stadium?id=' + item.id +
								"&court_id=" +
								item.id +
								"&name=" +
								item.name +
								'&venue_id=' +
								item.venue_id +
								'&windows=' +
								item.windows
						})
					}

				} else {
					uni.showModal({
						// title: data[1],
						content: tip,
						showCancel: false,
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {}
						}
					});
				}

			},
			loucheng(item, index) {
				// this.current_Tab = 0
				// this.gjindex = index
				// this.po48 = item.court_img
				this.gjindex = item.name
				this.floorindex = item.name
				this.getSpCourt2()
				this.getSpCourt3()
				// this.getSpCourtCate()
			},
			tabClick(item) {
				this.floorindex = ''
				this.po48 = ''
				this.list2 = []
				this.splist = []
				this.list3 = []
				// this.gjindex = 0
				this.current_Tab = 0
				this.currentTab = item.index;
				this.list3 = item.floor
				// this.po48 = item.floor[0].court_img
				this.gjindex = item.floor[0].name
				this.venue_id = item.id
				this.floorindex = item.floor[0].name
				this.getSpCourtCate()
			},
			tab_Click(item) {
				this.splist = []
				this.current_Tab = item.index;
				// this.po48 = item.floor[0].floor_img
				this.cate_id = item.id
				this.getSpCourt2()
				this.getSpCourt3()
			},
			onPreview() {
				this.onPreviewTap()
			},
			// 预览图片
			onPreviewTap() {
				uni.previewImage({
					urls: this.Preimg,
					current: this.Preimg[0]
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.cons_con {
		.add_list {
			position: relative;
			width: 710rpx;
			height: 420rpx;
			margin: 0 auto;

			.add_li_img {
				width: 710rpx;
				height: 420rpx;
				margin: 0 auto;
			}

			.resize {
				color: #4BA677;
			}

			.add_li_center {
				position: absolute;
				z-index: 9;
				right: 20rpx;
				width: 62rpx;
				height: 420rpx;
				top: 0;
				font-size: 26rpx;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
			}

			.add_li_right {
				width: 62rpx;
				height: 62rpx;
				line-height: 62rpx;
				border: 1rpx #b1b1b1 solid;
				background-color: #fff;
				text-align: center;
			}

			.add_li_left {}

			// /* 根据索引值设置不同的垂直偏移 */
			// .add_li_right:nth-child(1) {
			// 	top: 30rpx;
			// }

			// .add_li_right:nth-child(2) {
			// 	top: 60rpx;
			// 	/* 根据需求调整偏移量 */
			// }

			// .add_li_right:nth-child(3) {
			// 	top: 120rpx;
			// 	/* 根据需求调整偏移量 */
			// }
			// .add_li_right:nth-child(4) {
			// 	top: 180rpx;
			// 	/* 根据需求调整偏移量 */
			// }
		}

		.conscon1 {
			padding: 20rpx;

			/deep/.u-tabs {
				background-color: #fff;
				// margin: 0 30rpx;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}

				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}
		}

		.conscon2 {
			padding: 20rpx 0 20rpx 0;

			/deep/.u-tabs {
				background-color: #fff;
				// margin: 0 30rpx;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}

				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}
		}

		.group_6 {
			background-color: rgba(255, 255, 255, 1.0);
			border-radius: 12rpx;
			width: 710rpx;
			padding-bottom: 20rpx;
			flex-direction: row;
			display: flex;
			// justify-content: space-between;
			margin: 28rpx auto 0;
		}

		.block_3 {
			border-radius: 10rpx;
			// background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0ffd3594354408ab5f6ace6bccb713b_mergeImage.png);
			width: 280rpx;
			height: 180rpx;
			display: flex;
			flex-direction: column;

			image {
				border-radius: 10rpx;
				width: 280rpx;
				height: 180rpx;
			}
		}

		.block_4 {
			display: flex;
			flex-direction: column;
			margin: 0 0 0 20rpx;
			flex: 1;
		}

		.text_11 {
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 40rpx;
		}

		.text-wrapper_4 {
			width: 364rpx;
			flex-direction: row;
			display: flex;
			// justify-content: space-between;
			margin: 10rpx 0 0 0;
		}

		.text_12 {
			overflow-wrap: break-word;
			color: rgba(75, 166, 119, 1.0);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
		}

		.text_13 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
			margin-left: 15rpx;
		}

		.image-text_1 {
			width: 138rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 18rpx 0 0 0;
			align-items: center;
		}

		.label_4 {
			width: 23rpx;
			height: 26rpx;
		}

		.text-group_1 {
			overflow-wrap: break-word;
			color: #666666;
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 30rpx;
			margin-top: 2rpx;
			height: 30rpx;
		}

		.group_7 {
			margin-top: 16rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
		}

		.text-wrapper_5 {
			background-color: rgba(230, 230, 230, 0.6);
			border-radius: 4rpx;
			margin-top: 14rpx;
			display: flex;
			flex-direction: column;
			padding: 7rpx 11rpx 7rpx 11rpx;
			margin-right: 10rpx;
			// width: 80%;
		}

		.text_14 {
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 22rpx;
		}

		.text-wrapper_6 {
			background-color: rgba(230, 230, 230, 0.6);
			border-radius: 4rpx;
			display: flex;
			flex-direction: column;
			margin: 14rpx 0 0 10rpx;
			padding: 7rpx 12rpx 7rpx 12rpx;
		}

		.text_15 {
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: right;
			white-space: nowrap;
			line-height: 22rpx;
		}

		.text-wrapper_7 {
			margin-left: 80rpx;
			display: flex;
			flex-direction: column;
			padding: 13rpx 34rpx 13rpx 34rpx;
			background: linear-gradient(135deg, #6BD3A6 0%, #56BF89 100%), #56BF89;
			border-radius: 10rpx;
		}

		.text_16 {
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
		}
	}

	.box_1 {
		// box-shadow: 0px 0px 10px 0px rgba(32, 64, 48, 0.12);
		background-color: rgba(255, 255, 255, 1.0);
		display: flex;
		flex-direction: column;
		padding: 29rpx 12rpx 18rpx 20rpx;

		.box_4 {
			background-color: rgba(255, 255, 255, 1.0);
			border-radius: 12rpx;
			display: flex;
			flex-direction: row;
			padding: 0 0 20rpx 0;
		}

		.image-text_1 {
			width: 177rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
		}

		.section_1 {
			background-color: rgba(75, 166, 119, 1.0);
			border-radius: 12rpx;
			width: 6rpx;
			height: 24rpx;
			display: flex;
			flex-direction: column;
			margin: 8rpx 0 8rpx 0;
		}

		.text-group_1 {
			overflow-wrap: break-word;
			color: #333333;
			font-size: 28rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 40rpx;
		}

		.list_1 {
			// height: 960rpx;
			margin-right: 8rpx;
			display: flex;
			flex-direction: column;
		}

		.list-items_1-0 {
			width: 710rpx;
			background-size: 100% 100%;
			margin-bottom: 20rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx 0 30rpx;
			height: 120rpx;
			background: #F4F9F9;
			border-radius: 20rpx;
			align-items: center;
		}

		.list-items_1-1 {
			width: 86%;
			background-color: #fff;
			height: 100rpx;
			background-size: 100% 100%;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			// background: #F4F9F9;
			border-radius: 10rpx;
			align-items: center;
			padding: 0 20rpx;
		}

		.list-items_1-6 {
			flex-direction: row;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.text_3-0 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
			margin-left: 10rpx;
		}

		.text_3-1 {
			background-color: #7C9789;
			border-radius: 12rpx;
			width: 1rpx;
			height: 25rpx;
			display: flex;
			flex-direction: row;
		}

		.text_3-2 {
			background-color: #7C9789;
			border-radius: 12rpx;
			width: 1rpx;
			height: 25rpx;
			display: flex;
			flex-direction: row;
		}

		.text_4-0 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
			margin: 0 0 0 20rpx;
			margin-left: 10rpx;
		}

		.text_4-1 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 37rpx;
			// margin: 0 0 0 20rpx;
		}

		.text_5 {
			overflow-wrap: break-word;
			color: rgba(114, 158, 135, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 24rpx;
		}
	}
</style>